<template>
  <footer>
    <dl v-for="(v, p) in navs" :key="p" :class="{active: nav == p}" @click="routerLink(p)">
      <dt><img :src="require('../assets/footer/'+ (nav == p ? p + '-' : p)  +'@2x.png')"></dt>
      <dd>{{v}}</dd>
    </dl>
  </footer>
</template>

<script>
export default {
	name: "m-footer",
	data () {
		return {
			navs: {
				index: '首页',
				interact: '闪测',
				consult: '咨询',
				shop: '开运',
				my: '我的',
      },
		}
  },
  computed: {
    nav() {
      return this.$route.name.split('-')[0];
    }
  },
  methods: {
    routerLink(nav) {
      this.$router.push({
        path: '/' + nav,
      });
    }
  },
};
</script>

<style scoped lang="less">
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 11;
  width: 100%;
  .h(@fheight);
  background-color: #ffffff;
  border-top: 1px solid #ededed;
  display: flex;
  dl {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    &.active {
      color: @primary;
    }
    img {
      .h(38);
      display: block;
      margin: 0 auto 5px;
    }
    &:nth-child(3) img {
      transform: translateY(-50%) scale(1.8);
    }
  }
  dd {
    .f22;
  }
}
</style>
